import { Link } from 'react-router-dom';
import { Globe, Zap, Code, Check } from 'lucide-react';
import Button from '../components/Button';
import { useLanguage } from '../contexts/LanguageContext';
import { useLocalizedLink } from '../hooks/useLocalizedLink';

const Home = () => {
  const { t } = useLanguage();
  const { getLink } = useLocalizedLink();

  return (
    <div className="w-full">
      {/* Hero Section */}
      <section className="relative bg-[#0f1c3f] dark:bg-gray-800 text-white py-20 overflow-hidden transition-colors duration-300">
        <div className="absolute inset-0 opacity-10 dark:opacity-5">
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
            <defs>
              <pattern id="network" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
                <circle cx="50" cy="50" r="1" fill="#00d4ff" />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#network)" />
          </svg>
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
              <span className="block">{t('home.hero.title.line1')}</span>
              <span className="block mt-2">{t('home.hero.title.line2')}</span>
            </h1>
            <p className="text-lg md:text-xl text-gray-300 mb-8">
              {t('home.hero.subtitle')}
            </p>
            <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6">
              <Link to={getLink('/register')}>
                <Button size="lg" variant="gradient" className="min-w-[160px]">
                  {t('home.hero.getStarted')}
                </Button>
              </Link>
              <Link to={getLink('/pricing')}>
                <Button variant="outline" size="lg" className="min-w-[160px]">
                  {t('home.hero.viewPricing')}
                </Button>
              </Link>
            </div>
            <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
              <div className="bg-[#0f1c3f]/50 dark:bg-gray-700/50 backdrop-blur-sm p-6 rounded-lg border border-gray-700 dark:border-gray-600">
                <div className="text-[#00d4ff] text-3xl font-bold">1,245,789</div>
                <div className="text-gray-300 dark:text-gray-200 mt-2">{t('home.stats.proxyIPs')}</div>
              </div>
              <div className="bg-[#0f1c3f]/50 dark:bg-gray-700/50 backdrop-blur-sm p-6 rounded-lg border border-gray-700 dark:border-gray-600">
                <div className="text-[#00d4ff] text-3xl font-bold">50+</div>
                <div className="text-gray-300 dark:text-gray-200 mt-2">{t('home.stats.countries')}</div>
              </div>
              <div className="bg-[#0f1c3f]/50 dark:bg-gray-700/50 backdrop-blur-sm p-6 rounded-lg border border-gray-700 dark:border-gray-600">
                <div className="text-[#00d4ff] text-3xl font-bold">456 TB</div>
                <div className="text-gray-300 dark:text-gray-200 mt-2">{t('home.stats.bandwidth')}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="py-20 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-[#0f1c3f] dark:text-white mb-4">
              {t('home.features.title')}
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              {t('home.features.subtitle')}
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl transition-colors duration-300">
              <div className="w-12 h-12 bg-[#0f1c3f] dark:bg-gray-700 rounded-lg flex items-center justify-center mb-4">
                <Globe className="text-[#00d4ff]" size={24} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('home.features.global.title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">{t('home.features.global.description')}</p>
            </div>
            <div className="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl transition-colors duration-300">
              <div className="w-12 h-12 bg-[#0f1c3f] dark:bg-gray-700 rounded-lg flex items-center justify-center mb-4">
                <Zap className="text-[#00d4ff]" size={24} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('home.features.performance.title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">{t('home.features.performance.description')}</p>
            </div>
            <div className="p-6 bg-gray-50 dark:bg-gray-800 rounded-xl transition-colors duration-300">
              <div className="w-12 h-12 bg-[#0f1c3f] dark:bg-gray-700 rounded-lg flex items-center justify-center mb-4">
                <Code className="text-[#00d4ff]" size={24} />
              </div>
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-2">
                {t('home.features.easeOfUse.title')}
              </h3>
              <p className="text-gray-600 dark:text-gray-300">{t('home.features.easeOfUse.description')}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases Section */}
      <section className="py-20 bg-gray-50 dark:bg-gray-800 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-[#0f1c3f] dark:text-white mb-4">
              {t('home.useCases.title')}
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              {t('home.useCases.subtitle')}
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-sm transition-colors duration-300">
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-4">
                {t('home.useCases.dataCollection.title')}
              </h3>
              <ul className="space-y-3">
                {t('home.useCases.dataCollection.items').map((item: string, index: number) => (
                  <li key={index} className="flex items-start">
                    <Check className="text-[#00c853] mr-2 mt-1 flex-shrink-0" size={18} />
                    <span className="text-gray-700 dark:text-gray-200">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-sm transition-colors duration-300">
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-4">
                {t('home.useCases.seo.title')}
              </h3>
              <ul className="space-y-3">
                {t('home.useCases.seo.items').map((item: string, index: number) => (
                  <li key={index} className="flex items-start">
                    <Check className="text-[#00c853] mr-2 mt-1 flex-shrink-0" size={18} />
                    <span className="text-gray-700 dark:text-gray-200">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-sm transition-colors duration-300">
              <h3 className="text-xl font-bold text-[#0f1c3f] dark:text-white mb-4">
                {t('home.useCases.adVerification.title')}
              </h3>
              <ul className="space-y-3">
                {t('home.useCases.adVerification.items').map((item: string, index: number) => (
                  <li key={index} className="flex items-start">
                    <Check className="text-[#00c853] mr-2 mt-1 flex-shrink-0" size={18} />
                    <span className="text-gray-700 dark:text-gray-200">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials */}
      <section className="py-20 bg-white dark:bg-gray-900 transition-colors duration-300">
        <div className="container mx-auto px-4">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-[#0f1c3f] dark:text-white mb-4">
              {t('home.testimonials.title')}
            </h2>
            <p className="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
              {t('home.testimonials.subtitle')}
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl transition-colors duration-300">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-[#0f1c3f] dark:bg-gray-700 rounded-full flex items-center justify-center text-white font-bold">
                  {t('home.testimonials.customer1.name').charAt(0)}
                </div>
                <div className="ml-4">
                  <h4 className="font-bold dark:text-white">{t('home.testimonials.customer1.name')}</h4>
                  <p className="text-gray-600 dark:text-gray-400 text-sm">{t('home.testimonials.customer1.position')}</p>
                </div>
              </div>
              <p className="text-gray-700 dark:text-gray-300">"{t('home.testimonials.customer1.review')}"</p>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 p-6 rounded-xl transition-colors duration-300">
              <div className="flex items-center mb-4">
                <div className="w-12 h-12 bg-[#0f1c3f] dark:bg-gray-700 rounded-full flex items-center justify-center text-white font-bold">
                  {t('home.testimonials.customer2.name').charAt(0)}
                </div>
                <div className="ml-4">
                  <h4 className="font-bold dark:text-white">{t('home.testimonials.customer2.name')}</h4>
                  <p className="text-gray-600 dark:text-gray-400 text-sm">{t('home.testimonials.customer2.position')}</p>
                </div>
              </div>
              <p className="text-gray-700 dark:text-gray-300">"{t('home.testimonials.customer2.review')}"</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 bg-[#0f1c3f] dark:bg-gray-800 text-white transition-colors duration-300">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            {t('home.cta.title')}
          </h2>
          <p className="text-xl text-gray-300 dark:text-gray-200 mb-8 max-w-2xl mx-auto">
            {t('home.cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-6">
            <Link to={getLink('/register')}>
              <Button size="lg" className="bg-white dark:bg-gray-700 text-[#0f1c3f] dark:text-white hover:bg-gray-100 dark:hover:bg-gray-600 shadow-lg hover:shadow-xl min-w-[180px]">
                {t('home.cta.freeTrial')}
              </Button>
            </Link>
            <Link to={getLink('/pricing')}>
              <Button variant="outline" size="lg" className="border-white text-white hover:bg-white hover:text-[#0f1c3f] dark:hover:bg-gray-700 dark:hover:text-white min-w-[180px]">
                {t('home.cta.viewPlans')}
              </Button>
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Home;
